<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="__CDN__/assets/libs/bootstrap/js/modal.js"></script>
<script src="__CDN__/assets/libs/fastadmin-layer/dist/layer.js"></script>
<style>
    .top{
        width: 100%;
        display: flex;
        margin-top: 20px;
        margin-bottom: 30px;
        text-align: center;
        .topconxtop{
            width: 25%;
            position: relative;

            .topcon{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                color: red;

                .row{
                    width: 25px;
                    height: 25px;
                    background: #fff;
                    border: 1px solid red;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 25px;
                    font-size: 16px;

                }
            }
            .xt{

                width: 100%;
                position: absolute;
                left: 104.8%;
                transform: translateX(-50%);
                top: 12.5px;
                height: 1px;
                background: red;
            }
            .topcon2{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                color: #CCC;

                .row{
                    width: 25px;
                    height: 25px;
                    background: #fff;
                    border: 1px solid #CCC;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 25px;
                    font-size: 16px;

                }
            }
            .xt2{

                width: 100%;
                position: absolute;
                left: 104.8%;
                transform: translateX(-50%);
                top: 12.5px;
                height: 1px;
                background: #CCC;
            }



        }






    }
    .detail_index{
        margin-left: 30px;
        margin-right: 30px;
    }
    .deliver-edit,.address-edit{
        float: right;
        width: 100px;
        text-align: center;
        background: red;
        color: #fff;
        margin-left: 10px;

    }
    .basic_index tr td{
        background: #fff;
    }
    .basic_index{
       text-align: center;
       margin-top: 20px;
       margin-bottom: 30px;
    }
    .basic_index_tr td{
        background: #ccc !important;
    }
    .refund-opt{
        width: 100px;float: right !important;
    }



    .container {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .table-inner {
        background-color: #f8f9fa;
    }
    .table-innermost {
        background-color: #e9ecef;
    }
</style>

<div class="top">

    <div class="topconxtop">
        <div class="topcon">
            <div class="row">
                1
            </div>
            <div style="margin-top: 6px">提交订单<br>{$row.order.createtime|date="Y-m-d H:i:s",###}
            </div>
        </div>
        <div class=" {if $row['order']['state'] >=2 } xt
            {else /}   xt2
          {/if}"></div>
    </div>
    <div class="topconxtop">
        <div class="  {if $row['order']['state'] >=2 } topcon
            {else /}   topcon2
          {/if} ">
            <div class="row">
                2
            </div>
            <div style="margin-top: 6px">已付款<br>{$row.order.paymenttime|date="Y-m-d H:i:s",###}

            </div>
        </div>
        <div class="   {if $row['order']['state'] >=3 } xt
              {else /}   xt2
            {/if} ">
        </div>
    </div>

    <div class="topconxtop">
        <div class=" {if $row['order']['state'] >=6 } topcon
            {else /}   topcon2
          {/if}">
            <div class="row">
                5
            </div>
            <div style="margin-top: 6px">订单完成<br> {$row.order.dealtime|date="Y-m-d H:i:s",###}</div>
        </div>
    </div>


</div>
<div class="clearfix"></div>  
<!--在这写-->

<div class="detail_index">
<div>
    基本信息 

    
    <!-- <a href="javascript:;" class="deliver-edit btn-disabled disabled " data-type="deliver" data-ids="{$row.id}">物流信息</a> -->
</div>
<div class="clearfix"></div>  

<table class="basic_index table table-bordered">
    <tr class="basic_index_tr">
        <td>订单状态</td>
        
        <td>订单编号</td>
        <td>用户昵称</td>
       
    </tr>
    <tr>
        <td>{$kuaidi.status|htmlentities}</td>
      
        <td>{$row.order.order_no|htmlentities}</td>
        <td>{$row.user.nickname|htmlentities}</td>
        
    </tr>
    <tr class="basic_index_tr">
        <td>支付方式</td>
        <td>下单门店</td>
       
        <td>用户电话</td>
    </tr>
    <tr>
        <td>--</td>
        <td>{$row.shop.shopname|htmlentities}</td>
        
        <td>{$row.user.mobile|htmlentities}</td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: left">订单备注:{$row.refund.remarks}</td>

    </tr>
</table>

<div>
    商品信息 

    
</div>
<div class="clearfix"></div>  

<table class="basic_index table table-bordered">
    <tr class="basic_index_tr">
        <td>序号</td>
        <!-- <td>图片</td> -->
        <td>名称</td>
        <!-- <td>规格</td> -->
        <td>数量</td>
        <td>商品编号</td>
        <td>单价</td>
        <td>应付金额</td>
      
        <td>小计</td>
        <td>实付金额</td>
    </tr>
    {volist name="row.info" id="item"  key="index" }
    <tr>
        <td>{$index}</td>
        <!-- <td><img src="{$item.image}"  width="80" >
            </td> -->
        <td>{$item.name}</td>
       
        <td>{$item.total}</td>
        <td>{$item.code}</td>
        <td>{$item.save_price}</td>
        <td>{$item.price}</td>
        
        <td>{$item.actual_price}</td>
        <td>{$item.actual_price}</td>
    </tr>
   
    {/volist}
    
    
</table>
<!-- <div>
    收货人信息 

    <a href="javascript:;" class="address-edit  btn-disabled disabled " data-type="address" data-ids="{$row.id}">修改发货地址</a>
    
</div>
<div class="clearfix"></div>  

<table class="basic_index table table-bordered">
    <tr class="basic_index_tr">
        <td>收货人</td>
        <td>联系电话</td>
        <td>收货地址</td>
       
    </tr>
    <tr>
       
        <td>{$row.address.name|htmlentities}</td>
        <td>{$row.address.mobile|htmlentities}</td>
        <td>{$row.address.address|htmlentities}</td>
    </tr>
    
</table> -->

<div>
    付款明细 

    
</div>
<div class="clearfix"></div>  

<table class="basic_index table table-bordered">
    <tr class="basic_index_tr">
        <td>商品合计（元）</td>
        <td>优惠活动（元）</td>
        <td>优惠卷（元）</td>
        <td>应付小计金额（元）</td>
        <td>实付金额（元）</td>
    </tr>
    <tr>
        <td>{$row.refund.item_price}</td>
        <td>{$row.refund.item_price}</td>
        <td>{$row.refund.coupon_price}</td>
        <td>{$row.refund.item_price}</td>
        <td>{$row.refund.actual_price}</td>

    </tr>
    
</table>

    {if condition="($row.refund.state == 6) && ($row.refund.item_state ==0)"}
    <table class="basic_index table table-bordered">
        <button class="btn btn-danger btn-operate-order pay-order col-xs-10 refund-opt" >退款</button>
    </table>
    {/if}
    <!-- 添加商品 -->
    <div class="modal fade" id="showRefundModal" tabindex="-1" role="dialog" aria-labelledby="showRefundModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addGoodsLabel">退款申请</h4>
                </div>
                <div class="modal-body">
                    <div class="">
                        <!-- 外层表格：5行2列 -->
                        <table class="table table-bordered">
                            <tbody>
                            <!-- 第1行 -->
                            <tr>
                                <td class="col-3">订单编号</td>
                                <td class="col-9">{$row.refund.order_no}</td>
                            </tr>
                            <!-- 第2行 -->
                            <tr>
                                <td>下单时间</td>
                                <td>{$payTime}</td>
                            </tr>


                            <!-- 第5行 - 包含内层表格 -->
                            <tr>
                                <td>退款商品</td>
                                <td>
                                    <!-- 内层表格：1行2列 -->
                                    {if condition="($row.refund.type == 1) OR ($row.refund.type ==2)"}
                                    <table class="table table-bordered table-inner">
                                        <tbody>
                                        <tr>

                                            <td class="col-8">
                                                <!-- 最内层表格：2行5列 -->
                                                <table class="table table-sm table-bordered table-innermost">
                                                    <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>名称</th>
                                                        <th>单价</th>
                                                        <th>购买次数</th>
                                                        <th>已用次数</th>
                                                        <th>可用次数</th>
                                                        <th>实付金额</th>
                                                        <th>退款金额</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <th>{$row.refund.id}</th>
                                                        <th>{$row.refund.item_name}</th>
                                                        <td>¥{$row.refund.price}</td>
                                                        <td>{$row.refund.total}</td>
                                                        <td>{$row.refund.use_times}</td>
                                                        <td>{$row.refund.spent}</td>
                                                        <td>¥{$row.refund.actual_price}</td>
                                                        <td>
                                                            <input type="number" id="refund-price" class="form-control form-control-sm" value="{$row.refund.refund_price}">
                                                        </td>
                                                    </tr>

                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>

                                    {elseif condition="$row.refund.type eq 4"/}
                                    <table class="table table-bordered table-inner">
                                        <tbody>
                                        <tr>

                                            <td class="col-8">
                                                <!-- 最内层表格：2行5列 -->
                                                <table class="table table-sm table-bordered table-innermost">
                                                    <thead>
                                                    <tr>
                                                        <th>序号</th>
                                                        <th>名称</th>
                                                        <th>实付金额</th>
                                                        <th>可退金额</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <th>{$row.refund.id}</th>
                                                        <th>{$row.refund.item_name}</th>
                                                        <td>¥{$row.refund.actual_price}</td>
                                                        <td>{$row.refund.item_spent}</td>
                                                        <td>
                                                            <input type="number" id="refund-price" class="form-control form-control-sm" value="{$row.refund.item_spent}">
                                                        </td>
                                                    </tr>

                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    {/if}
                                </td>
                            </tr>
                            <!-- 第4行 -->
                            <tr>
                                <td>退款说明</td>
                                <td>
                                    <textarea class="form-control" id="refund-nete" rows="3" placeholder="请详细描述退款原因..."></textarea>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </div>
                </div>

                <div class="modal-footer model-confirm">
                    <button type="button" class="btn btn-danger btn-confirm-refund-info" date-order-item_id="{$row.refund.id}">确认退款</button>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        //选择商品规格
        $(document).on('click', '.refund-opt', function () {
            //$('#showRefundModal').show();
            $('#showRefundModal').modal('show');
        });
        $(document).on('click', '.btn-confirm-refund-info', function () {
            //$('#showRefundModal').show();
            var note=$('#refund-nete').val();
            var refundPrice=$('#refund-price').val();
            var orderItemId=$(this).attr('date-order-item_id');
            $('#showRefundModal').modal('hide');
            $.ajax({
                type: 'POST',
                url: '/cashdesk/index/orderRefund',
                dataType: "json",
                data: {
                    order_item_id:orderItemId,
                    refund_price:refundPrice,
                    note:note
                },
                success: function (ret) {
                    if(ret.code==1){
                        layer.open({
                            type: 1,
                            area: ['280px', '180px'],
                            content: '<p style="padding: 15px;font-size: 16px;color: #ff0000;">'+ret.msg+'</p>',
                            btn: ['确定'], // 弹窗按钮
                            btnAlign:"c",
                            yes: function(index, layero){
                                // 点击确定按钮后的回调函数
                                // index是弹窗的索引，layero是弹窗的DOM对象
                                layer.close(index); // 关闭弹窗
                                window.location='/fQTrLEivaP.php/order/item';

                            }
                        });
                    }else {
                        layer.open({
                            type: 1,
                            area: ['280px', '180px'],
                            content: '<p style="padding: 15px;font-size: 16px;color: #ff0000;">'+ret.msg+'</p>',
                            btn: ['确定'], // 弹窗按钮
                            btnAlign:"c",
                            yes: function(index, layero){
                                // 点击确定按钮后的回调函数
                                // index是弹窗的索引，layero是弹窗的DOM对象
                                layer.close(index); // 关闭弹窗
                            }
                        });
                    }
                },
                error: function (data) {
                    layer.open({
                        type: 1,
                        area: ['280px', '180px'],
                        content: '<p style="padding: 15px;font-size: 16px;color: #ff0000;">'+data.msg+'</p>',
                        btn: ['确定'], // 弹窗按钮
                        btnAlign:"c",
                        yes: function(index, layero){
                            // 点击确定按钮后的回调函数
                            // index是弹窗的索引，layero是弹窗的DOM对象
                            layer.close(index); // 关闭弹窗
                        }
                    });
                }
            });
            return false;
        });

    })

</script>


